<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <title>查询界面</title>
</head>
<script>
    window.onload = function () {
        findByPage(1);
    }

    async function del(id) {
        let info = await ajaxGet("/employee/del", {employeeId: id});
        if (info == "ok") {
            findByPage(1);
        }
    }


    //动态条件查询
    async function findByPage(pageNo) {
        let param = {
            pageNo: pageNo,
            startDate: $("startDate").value,
            endDate: $("endDate").value,
            name: $("name").value
        };
        //获取得到的信息
        let info = await ajaxGet("/employee/findByPage", param);
        let str = "";
        for (let i = 0; i < info.list.length; i++) {
            let obj = info.list[i];
            str += `<tr><td>${obj.employeeName}</td><td>${obj.money}</td><td>${obj.employeeBirthday}</td>
               <td>${obj.deptBean.deptName}</td>
            <td><a href="javascript:del(${obj.employeeId})">删除</a>
            <a href="/html/update.html?employeeId=${obj.employeeId}">修改</a>
            </td></tr>`
        }
        $("data").innerHTML = str;

        let cutStr = "";
        for (let i = 1; i <= info.pages; i++) {
            cutStr += `<a style="margin: 10px" href="javascript:findByPage(${i})">${i}</a>`
        }
        $("cutPageDiv").innerHTML = cutStr;
    }
</script>

<body>
<table border="1" cellspacing="0" width="50%">
    <thead>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>生日</th>
        <th>部门</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="data">
    </tbody>
</table>
<div id="cutPageDiv"></div>
<div><a href="/html/add.html">点击添加</a></div>
<div>
    姓名 <input type="text" id="name"><br>
    起始日期 <input type="date" id="startDate"><br>
    结束日期 <input type="date" id="endDate"> <br>
    <input type="button" onclick="findByPage(1)" value="点击提交">
</div>
</body>
</html>